<template>
  <div style="width:100vw;height:100vh;" class="class-box">
    <!-- 头部 -->
    <!-- <mt-header fixed title="课程详情">
      <div @click="goBack" slot="left">
        <mt-button icon="back"></mt-button>
      </div>
    </mt-header>-->

    <!-- 主体部分 -->
    <div class="class-body teacher-head">
      <div class="teacher-card">
        <div class="flex-row teacher-card-top">
          <div>
            <p class="teacher-name">{{teacherList.username}}</p>
            <p class="teacher-ms">{{teacherList.deptName}}</p>
            <p class="teacher-mss">
              <span>{{teacherList.job}}</span>
              <span class="teacher-type">徒弟版</span>
            </p>
          </div>
          <div class="teacher-picture">
            <img src="@/assets/homePicture/userpicture.png" alt />
          </div>
        </div>
      </div>
      <!-- <div class="class-explain">
        <div class="explain-tip">课程说明</div>
      </div>-->
      <div class="explain-content">
        <div class="bscroll" ref="bscroll1">
          <div class="bscroll-container">
            <div v-for="(item,index) in assessmentObj" :key="index" class="assess-item">
              <p class="p-tips">
                <span style="color:red;">*</span>
                {{item.forType}}
              </p>
              <div class="pj-item-box" v-for="(row,indexs) in item.row" :key="indexs">
                <p class="pt-tips">{{row.labelName}}</p>
                <p v-for="(rowList,indexss) in row.rowName" :key="indexss">
                  {{(indexss+1)+'.'+rowList.label}}
                </p>
                <div class="star-box">
                  <input class="own-input" type="number" v-model="rowList['row'+(row.index+1)]" max="8" />
                  <!-- <span>分值范围：{{item.range}}</span> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-group flex-row">
      <mt-button @click.native="confirm" type="primary" size="large">提交</mt-button>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { Indicator, Toast } from "mint-ui";
import { setText } from "../../untils/ddnavigate";
const Easydate = require("../../untils/easydate");
import AssessmentObj from "../../untils/studentobj";
export default {
  data() {
    return {
      assessmentObj: AssessmentObj,
      teacherList: {},
      rowList:{
        row1:'',
        row2:'',
        row3:'',
        row4:'',
        row5:'',
        row6:'',
        row7:'',
        row8:'',
        row9:'',
        row10:'',
      }
    };
  },
  mounted() {
    let { id } = this.$route.query;
    let params = {
        id
    }
    this.$get("qryUserInfoById",params).then(res => {
      if (res.success) {
        this.teacherList = res.data;
      }
    });
    // 设置标题文字
    setText("徒弟评估");
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll1;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
  },
  methods: {
    confirm() {
      let { id } = this.$route.query;
      let that = this;
      let {rowList} = that;
      rowList.stuId = id;
      for(let k in rowList){
        rowList[k] = Number(rowList[k])
      };
      that.$post("stuEva", rowList).then(res => {
        if (res.success) {
          let toastObj = Toast({
            message: "操作成功",
            iconClass: "mint-toast-icon mintui mintui-success",
            duration: 2000
          });
          setTimeout(() => {
            that.$router.go(-1);
          }, 2000);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url("~@/pagecss/class-details.less");
.pj-item-box{
  padding-bottom: 20/75rem;
  border-bottom: 0.5px solid rgba(71, 135, 227, 0.2);
}
.pt-tips{
  margin-top: 20/75rem;
  font-size: 26/75rem !important;
  font-weight: 800 !important;
}
.p-tips{
  font-size: 28/75rem !important;
  font-weight: 800 !important;
}
.own-input {
  border: 0.5px solid #26a2ff;
  height: 23px;
  width: 55%;
  margin-right: 5%;
}
.bscroll {
  height: 65vh;
}
.bscroll-container {
  padding-bottom: 50px;
}
.explain-content {
  background-color: transparent !important;
}
.class-box .class-body .explain-content p {
  margin-bottom: 10/75rem;
}
.btn-group {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 23/75rem 30/75rem;
  background-color: #ffffff;
}
.btn-group button {
  flex: 1 0 auto;
}
.mint-button--default {
  margin-right: 66/75rem;
}
.assess-item {
  padding: 20/75rem 0 0;
}
.teacher-head {
  padding: 25/75rem 0;
  background: rgba(255, 255, 255, 1);
  .teacher-card {
    margin: 0 28/75rem;
    padding: 40/75rem 25/75rem 60/75rem;
    box-shadow: 0px 2px 8px 1px rgba(153, 153, 153, 1);
    border-radius: 7px;
    .teacher-card-top {
      justify-content: space-between;
      padding-bottom: 30/75rem;
      border-bottom: 0.5px solid rgba(64, 133, 225, 0.2);
    }
    .teacher-name {
      margin-bottom: 30/75rem;
      font-size: 34/75rem;
      font-weight: bold;
      color: rgba(1, 1, 1, 1);
    }
    .teacher-ms {
      margin-bottom: 20/75rem;
    }
    .teacher-ms,
    .teacher-mss {
      font-size: 26/75rem;
      font-weight: 300;
      color: rgba(153, 153, 153, 1);
    }
    .teacher-picture {
      width: 154/75rem;
      height: 154/75rem;
      border-radius: 8px;
      background-color: antiquewhite;
      border-radius: 50%;
    }
    .teacher-type {
      margin-left: 40/75rem;
      padding: 0 6px;
      font-size: 18/75rem;
      font-weight: 400;
      color: rgba(71, 135, 228, 1);
      border: 0.5px solid rgba(71, 135, 228, 1);
      border-radius: 12px;
    }
  }
}
</style>